<script lang="ts" setup>
import { useMemberStore, usePhoneStore } from '@/stores'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const phoneStore = usePhoneStore()
const memberStore = useMemberStore()
const popupRef = ref()
const query = ref({
  invitationClientId: '',
  marketingId: null,
})

const SkipPopupRef = ref()
const SkipPopupImg = ref(
  '',
)
/**返回首页 */
const back = () => {
  uni.switchTab({
    url: '/pages/index/index',
  })
}

onLoad((opacity: any) => {
  console.log('opacity', opacity)
  query.value = opacity
  pageData.value.marketingId = query.value?.marketingId
  getActivityConfig()
})
const pageData = ref<any>({
  backgroundImg: '/static/images/InviteRegister/bg.png',
  marCoupon: {
    type: 1, // 1-满减券
    discounts: 10, // 优惠金额
    threshold: 30, // 满多少可用
    position: 1, // 1-可查看使用点位
    id: 123456, // 优惠券ID
  },
  shareTitle: '新人专享优惠券',
  shareImg: 'https://example.com/share.png',
  buttonName: '立即领取',
  activityRule: '1. 每人限领一张\n2. 有效期7天\n3. 仅限堂食使用',
})

/** 获取活动配置 */
const getActivityConfig = async () => {
  const res = await getByMarketingApi({ marketingId: pageData.value?.marketingId })
  console.log('活动配置', res)
  pageData.value = { ...res.data }
  console.log(pageData.value)
  const shareParams = {
    path: `/pagesMy/InviteRegister/InviteRegister?invitationClientId=${memberStore.userInfo?.id}&marketingId=${pageData.value.marketingId}`,
    title: pageData.value.shareTitle,
    imageUrl: pageData.value.shareImg,
  }
  // setupOnShareAppMessage(shareParams)
}

import { getByMarketingApi, postActiviryAcquireApi } from '@/services/my'

// 调用小程序的分享，以及监听小程序分享
import useMiniShare from '@/hooks/useMiniShare'
// const { isShareFriends, setupOnShareAppMessage, onShareAppMessage } = useMiniShare()

// isShareFriends()
// onShareAppMessage

const getWelfare = async () => {
  if (memberStore.token) {
    const res = await postActiviryAcquireApi({
      marketingId: query.value?.marketingId,
      invitationClientId: query.value?.invitationClientId,
    })
    console.log(res)
    if (res.code !== 200) {
      textObj.value.text_one = '领取失败'
      textObj.value.text_two = '请参与其他活动吧'
    }
    SkipPopupRef.value.open()
  } else {
    popupRef.value.open()
  }
}
const textObj = ref({
  text_one: '领取成功',
  text_two: '快来吃饭吧',
})

/** 点击弹窗按钮  */
const receive = () => {
  uni.switchTab({ url: '/pages/eat/eat' })
  console.log('点击按钮')
}

/** 传入值返回优惠券规则 */
const convertText = (item: any) => {
  if (item?.threshold) {
    return `满${item?.threshold}元可用`
  } else {
    return `无门槛立减`
  }
}

/**跳转到可使用点位页面 */
const skipPage = (couponId: number) => {
  console.log(couponId)
  uni.navigateTo({
    url: `/pagesMy/availablePoint/availablePoint?couponId=${couponId}`,
  })
}

// 公共弹出框
import usePopup from '@/hooks/usePopup'
const { SkipPopupRef: PopupRef, receive: PopupReceive, skipPopupData } = usePopup()
</script>

<template>
  <view class="_imaBgc_box" :style="{ backgroundImage: `url(${pageData.backgroundImg})` }">
    <view
      class="iconfont icon_home"
      :style="{ top: 2 + phoneStore?.phoneInfo?.top + 'px' }"
      @tap="back()"
    ></view>
    <!-- <button class="couponsType">
      {{
        pageData?.marCoupon?.type === 1
          ? '满减券'
          : pageData?.marCoupon?.type === 2
          ? '折扣券'
          : pageData?.marCoupon?.type === 3
          ? '单品券'
          : pageData?.marCoupon?.type === 4
          ? '新人券'
          : pageData?.marCoupon?.type === 5
          ? '霸王免单券'
          : ''
      }}
    </button> -->
    <view v-if="pageData?.marCoupon?.type !== 5">
      <view class="couponsPrice">
        ￥
        <view class="Price">{{ pageData?.marCoupon?.discounts }} </view>
      </view>
      <view class="couponsText">{{ convertText(pageData?.marCoupon) }}</view>
    </view>

    <view v-else class="freeOfCharge">免单</view>
    <button hover-class="view-hover" class="getWelfare" @tap="getWelfare()">
      {{ pageData.buttonName || '立即领取' }}
    </button>
    <view class="couponsRules">
      <view class="couponsRulesTitle">
        <image src="/static/images/InviteFriends/icon_1.png" mode="scaleToFill"></image>
        使用规则
        <image src="/static/images/InviteFriends/icon_1.png" mode="scaleToFill"></image>
      </view>
      <view class="couponsRulesText">{{ pageData.activityRule }}</view>
    </view>
    <view
      v-if="pageData?.marCoupon?.position == 1"
      class="skipPageText"
      @tap="skipPage(pageData?.marCoupon?.id)"
      >点击查看可使用点位详情</view
    >
  </view>
  <BjsSkipPopup :img="SkipPopupImg" ref="SkipPopupRef" :textObj="textObj" @receive="receive" />
  <!-- 公共弹窗 -->
  <BjsSkipPopup :img="skipPopupData.img" ref="PopupRef" @receive="PopupReceive" />
  <BjsPopup :invitationClientId="query.invitationClientId" ref="popupRef" />
</template>

<style lang="scss">
.dianzi {
  width: 100%;
  background: #f5ffef;
}
._imaBgc_box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-size: 100vw 100vh;
  background-position: center;
  background-repeat: no-repeat;
  .iconfont {
    position: absolute;
    left: 36rpx;
    top: 14rpx;
    width: 60rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 50%;
    color: #000;
    text-align: center;
    background: #fff;
    font-size: 44rpx;
  }
  .couponsType {
    position: absolute;
    top: 28.57vh;
    left: 84rpx;
    min-width: 104rpx;
    height: 38rpx;
    line-height: 38rpx;
    font-size: 24rpx;
    color: #fff;
    border-radius: 90rpx;
    background: #8adf4b;
  }
  .freeOfCharge {
    margin: 34.38vh 0 62rpx 0;
    color: #488b16;
    font-size: 76rpx;
  }
  .couponsPrice {
    margin-top: 450rpx;
    font-size: 60rpx;
    color: $uni-color-motif;
    display: flex;
    align-items: baseline;
    .Price {
      color: #000;
      font-size: 120rpx;
      line-height: 120rpx;
      font-weight: bold;
    }
  }
  .couponsText {
    text-align: center;
    margin: 0;
    font-size: 28rpx;
    color: #858585;
  }
  .getWelfare {
    width: 160rpx;
    height: 160rpx;
    display: flex;
    align-items: center;
    font-size: 36rpx;
    line-height: 48rpx;
    justify-content: center;
    color: #fff;
    border-radius: 200rpx;
    background: $uni-color-motif;
    color: #fff;
    border: 4rpx solid #000;
    margin-top: 80rpx;
  }
  ._title {
    font-size: 36rpx;
    margin: 136rpx 0 0 0;
    color: #488b16;
  }
  .couponsRules {
    margin-top: 60rpx;
    width: 650rpx;
    min-height: 480rpx;
    font-size: 30rpx;
    color: #362000;
    line-height: 1.5;
    border: 4rpx solid #000;
    background: #fff;
    .couponsRulesTitle {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100rpx;
      background: #ffdc17;
      color: #000;
      border-bottom: 4rpx solid #000;
      image {
        width: 32rpx;
        height: 36rpx;
        margin: 0 20rpx;
      }
    }
    .couponsRulesText {
      padding: 32rpx;
    }
  }
  .skipPageText {
    width: 664rpx;
    height: 38rpx;
    line-height: 38rpx;
    color: #000;
    font-size: 28rpx;
    text-decoration-line: underline;
    text-align: center;
    margin-top: 20rpx;
  }
}
</style>

